<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tooltip 文字提示 - Easy Frame</title>
    <meta name="description" content="Updates and statistics">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--str:::全局css -->
    <link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/css/demo1/style.bundle.css" rel="stylesheet" type="text/css"/>
    <!--end::全局css -->

    <link rel="shortcut icon" href="/assets/media/logos/favicon.ico"/>
</head>
<body class="e-page--loading">
    <div class="e-content">
    <div class="row">
        <div class="col">
            <div class="alert alert-light alert-elevate fade show" role="alert">
                <div class="alert-icon"><i class="flaticon-warning e-font-brand"></i></div>
                <div class="alert-text">
                    基于<code>Bootstrap Tooltip</code>，可前往<a class="e-link e-font-bold" href="https://getbootstrap.com/docs/4.3/components/tooltips/" target="_blank">查看详细API</a>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            基础
                        </h3>
                    </div>
                </div>
                <div class="card-body">

                    <!--begin::Section-->
                    <div class="e-section e-section--last">
                        <span class="e-section-info">
                            默认情况下鼠标放到按钮时显示文字提示，你可以在<code>任意</code>元素上添加<code>[data-toggle="e-tooltip"]</code>
                        以及<code>[title]</code>设置标题
                        </span>
                        <div class="e-section-content">
                            <button type="button" class="btn btn-danger" data-toggle="e-tooltip" data-placement="left" title="文字提示标题">鼠标放上来看看
                            </button>
                        </div>
                    </div>

                    <!--end::Section-->
                    <div class="e-separator e-separator--dashed"></div>

                    <!--begin::Section-->
                    <div class="e-section e-section--last">
                        <h3 class="e-section-title">
                            方向
                        </h3>
                        <span class="e-section-info">
                            你可以通过<code>[data-placement="top/right/button/left"]</code>设置文字提示在上下左右哪个方向显示
                        </span>
                        <div class="e-section-content">
                            <button type="button" class="btn btn-brand" data-container="body" data-toggle="e-tooltip"
                                    data-placement="top" title="文字提示标题">
                                在上方显示
                            </button>
                            <button type="button" class="btn btn-primary" data-container="body" data-toggle="e-tooltip"
                                    data-placement="right" title="文字提示标题">
                                在右边显示
                            </button>
                            <button type="button" class="btn btn-warning" data-container="body" data-toggle="e-tooltip"
                                    data-placement="bottom" title="文字提示标题">
                                在下方显示
                            </button>
                            <button type="button" class="btn btn-success" data-container="body" data-container="body"
                                    data-toggle="e-tooltip" data-placement="left" title="文字提示标题">
                                在左边显示
                            </button>
                        </div>
                    </div>

                    <!--end::Section-->
                    <div class="e-separator e-separator--dashed"></div>

                    <!--begin::Section-->
                    <div class="e-section e-section--last">
                        <h3 class="e-section-info">
                            你可以通过<code>[data-trigger="focus"]</code>设置文字提示点击时显示
                        </h3>
                        <div class="e-section-content">
                            <a tabindex="0" class="btn btn-success" role="button" data-toggle="e-tooltip"
                               data-trigger="focus" title="Dismissible tooltip"
                               data-content="And here's some amazing content. It's very engaging. Right?">点这里</a>
                        </div>
                    </div>

                    <!--end::Section-->
                </div>
            </div>

            <!--end::Card-->
        </div>
        <div class="col-lg-6">

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            高级
                        </h3>
                    </div>
                </div>
                <div class="card-body">

                    <!--begin::Section-->
                    <div class="e-section e-section--last">
                        <span class="e-section-info">
                            你可以通过<code>[data-html="true"]</code>开启内容区域html支持
                        </span>
                        <div class="e-section-content">
                            <button type="button" class="btn btn-primary" data-toggle="e-tooltip"
                                    title="使用<code>HTML</code>的<b>文字提示</b>" data-html="true"
                                    data-content="And here's some amazing <b>HTML</b> content. It's very <code>engaging</code>. Right?">
                                点击这里
                            </button>
                        </div>
                    </div>

                    <!--end::Section-->
                    <div class="e-separator e-separator--dashed"></div>

                    <!--begin::Section-->
                    <div class="e-section e-section--last">
                        <h3 class="e-section-title">
                            偏移
                        </h3>
                        <span class="e-section-info">
                            你可以通过<code>[data-offset="20px 20px"]</code>设置卡片偏移量
                        </span>
                        <div class="e-section-content">
                            <button type="button" class="btn btn-brand" data-offset="20px 20px" data-toggle="e-tooltip"
                                    data-placement="top" title="文字提示标题">
                                data-offset="20px 20px"
                            </button>
                            <button type="button" class="btn btn-success" data-offset="-20px -20px" data-toggle="e-tooltip"
                                    data-placement="top" title="文字提示标题">
                                data-offset="-20px -20px"
                            </button>
                            <button type="button" class="btn btn-danger" data-offset="60px 0px" data-toggle="e-tooltip"
                                    data-placement="top" title="文字提示标题">
                                data-offset="60px 0px"
                            </button>
                        </div>
                    </div>

                    <!--end::Section-->
                    <div class="e-separator e-separator--dashed"></div>

                    <!--begin::Section-->
                    <div class="e-section e-section--last">
                        <h3 class="e-section-title">
                            Skin
                        </h3>
                        <span class="e-section-info">
                            你可以使用<code>[data-skin="light"]</code>、<code>[data-skin="brand"]</code> 、<code>[data-skin="dark"]</code> 设置不同的显示风格
                        </span>
                        <div class="e-section-content">
                            <button type="button" class="btn btn-default" data-toggle="e-tooltip" data-placement="top"
                                    title="Default light skin">
                                亮色
                            </button>
                            <button type="button" class="btn btn-brand" data-skin="brand" data-toggle="e-tooltip"
                                    data-placement="top" title="Brand skin">
                                品牌色
                            </button>
                            <button type="button" class="btn btn-dark" data-skin="dark" data-toggle="e-tooltip"
                                    data-placement="top" title="Dark skin">
                                暗色
                            </button>
                        </div>
                    </div>

                    <!--end::Section-->
                </div>
            </div>

            <!--end::Card-->
        </div>
    </div>
</div>
<!--str:: 全局js -->
<script src="/assets/plugins/global/plugins.bundle.js"></script>
<script src="/assets/js/demo1/scripts.bundle.js"></script>
<!--end:: 全局js -->
</body>
</html>